<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
			p{
				border: 1px solid red;
				floa t: left;
				font-size: 16px;/*页面文字默认大小：16px*/
				line-height: 20px;/*浮动p块元素，美容行内元素*/
				/* 结论：文字不能浮动，特点：块包行 */
			}
			img{
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文字环绕</h1>
		<img src="img/1.jpg" alt="大梦" />
		<img src="img/2.gif" alt="大梦" />
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aliquam nemo ipsum rerum saepe harum quibusdam, cumque totam natus, iste nobis alias, pariatur et sed a earum dolor minima velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae dignissimos impedit non earum debitis. Voluptatem accusantium debitis aspernatur, ratione nobis voluptas facere eligendi a magnam voluptatum ut quos. Quos, ipsa. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint eius officiis deleniti voluptates accusamus atque aperiam, beatae similique molestias, numquam quos? Nisi similique numquam rem iure, doloribus nemo vitae soluta! Lorem ipsum dolor sit amet, consectetur adip Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim quos quo accusamus aperiam possimus beatae quod cupiditate velit eligendi, sed delectus magni non illum aliquam explicabo et eveniet fuga minima!</p>
	</body>
</html>